<template>
  <view class="wrap" v-if="showPage">
    <!-- <uv-navbar title="动态详情" autoBack placeholder>
      <template #right>
        <view class="navRight" @click="nowShare([1,2,3,4,6])">
          <image src="../../static/share2.png" class="img"></image>
        </view>
      </template>
    </uv-navbar>
    <template v-if="detail.deletetime || detail.status == 0">
      <view style="text-align: center;padding-top: 250px;">抱歉，此动态已删除</view>
    </template>
    <template v-else>
      <view class="head">
        <newDetail :detail='detail' :isClick='false' :foot='false' @followClick='getData'></newDetail>
      </view>
    <template v-if="!isBuy">
      <view class="moneyBox">
        <view class="money" @click="openPopup">
          <view>
            <view class="font">
              <view class="icon">
                <image src="../../static/reward.png" class="img"></image>
              </view>
              <view class="master">打赏作者</view>
            </view>
            <view class="more">已有 {{ detail.reward_num }} 人打赏</view>
          </view>
        </view>
      </view>
      <view class='works'>
        <view class="line"></view>
        <view class="item red" @click="setHelp(1)"><uv-icon name="arrow-up-fill" color="#E43222"></uv-icon>有用({{ detail.helpful_num }})</view>
        <view class="item grap" @click="setHelp(2)"><uv-icon name="arrow-down-fill" color="#737373"></uv-icon>无用</view>
      </view>
      <uv-gap height="16rpx" bgColor="#F5F5F5"></uv-gap>
      <view class="comment">
        <view class="head">评论 ({{ list.length }})</view>
        <comment :list='list' type='news' @click="reply" v-if="list.length"></comment>
      </view>
      <send type='news' :detail='detail' :focus='focus' :peoper='peoper' :ladder='ladder' :ids='id' @click="submit"></send>
    </template>
    <view class="footer" v-if="isBuy">
      <view class="pox">
        <view class="left">
          <view>
            <view class="font">{{ detail.coin }}投研币</view>
            <view class="desc" v-if="detail.is_deduct == 2">积分抵扣{{ Number(detail.money) }}投研币</view>
          </view>
          <button class="btn" hover-class="none" @click="goBuy">立即购买</button>
        </view>
      </view>
      <uv-safe-bottom></uv-safe-bottom>
    </view> -->
    
    
    
    <!-- #ifdef WEB -->
    <uv-navbar title="动态详情" placeholder left-icon=""></uv-navbar>
    <view class="appNav">
      <view class="left">
        <view class="logo"><image src="../../static/logo.png" class="img"></image></view>
        <view class="name">投研宝</view>
      </view>
      <button hover-class="none" class="btn" @click="goApp">去app查看</button>
    </view>
    <uv-line color="#EFEFEF"></uv-line>
    <!-- #endif -->
    <!-- #ifdef APP-PLUS -->
    <uv-navbar title="动态详情" autoBack placeholder>
      <template #right>
        <view class="navRight" @click="nowShare([1,2,3,4,6])">
          <image src="../../static/share2.png" class="img"></image>
        </view>
      </template>
    </uv-navbar>
    <!-- #endif -->
    <template v-if="detail.deletetime || detail.status == 0">
      <view style="text-align: center;padding-top: 250px;">抱歉，此动态已删除</view>
    </template>
    <template v-else>
      <view class="head">
        <newDetail :detail='detail' :isClick='false' :foot='false' @followClick='getData'></newDetail>
      </view>
      <!-- #ifdef APP-PLUS -->
      <template v-if="!isBuy">
        <view class="moneyBox">
          <view class="money" @click="openPopup">
            <view>
              <view class="font">
                <view class="icon">
                  <image src="../../static/reward.png" class="img"></image>
                </view>
                <view class="master">打赏作者</view>
              </view>
              <view class="more">已有 {{ detail.reward_num }} 人打赏</view>
            </view>
          </view>
        </view>
        <view class='works'>
          <view class="line"></view>
          <view class="item red" @click="setHelp(1)"><uv-icon name="arrow-up-fill" color="#E43222"></uv-icon>有用({{ detail.helpful_num }})</view>
          <view class="item grap" @click="setHelp(2)"><uv-icon name="arrow-down-fill" color="#737373"></uv-icon>无用</view>
        </view>
        <uv-gap height="16rpx" bgColor="#F5F5F5"></uv-gap>
        <view class="comment">
          <view class="head">评论 ({{ list.length }})</view>
          <comment :list='list' type='news' @click="reply" v-if="list.length"></comment>
        </view>
        <send type='news' :detail='detail' :focus='focus' :peoper='peoper' :ladder='ladder' :ids='id' @click="submit"></send>
      </template>
      <!-- #endif -->
      <!-- #ifdef WEB -->
      <view class="footer">
        <view class="pox">
          <button class="btn w100" hover-class="none" v-if="!isBuy" @click="goApp">
            请到APP查看
          </button>
          <view class="left" v-else>
            <view class="font">{{ detail.coin }}投研币</view>
            <button class="btn" hover-class="none" @click="goApp">去APP购买</button>
          </view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS -->
      <view class="footer" v-if="isBuy">
        <view class="pox">
          <view class="left">
            <view>
              <view class="font">{{ detail.coin }}投研币</view>
              <view class="desc" v-if="detail.is_deduct == 2">积分抵扣{{ Number(detail.money) }}投研币</view>
            </view>
            <button class="btn" hover-class="none" @click="goBuy">立即购买</button>
          </view>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
      <!-- #endif -->
      <view class="safe"></view>
      <uv-safe-bottom></uv-safe-bottom>
    </template>
    <share ref="onShare" :show='showLeng' @click="getShare"></share>
    
    <uv-popup ref="popup" bgColor='none' @change='popupChange'>
      <view class="popupBox">
        <view class="ava">
          <avatar :src='setUrl(detail.user.avatar)' styles='width: 160rpx;height: 160rpx'></avatar>
        </view>
        <view class="cell" :style="`background-image: url(${popupMoney})`">
          <view class="name">{{ detail.user.nickname }}</view>
          <view class="moneyBg" v-if="word">随机金额</view>
          <view class="moneyNumber" v-else>
            <!-- <view class="font">￥</view> -->
            <uv-input type='number' placeholder="1~200投研币" v-model="money" maxlength='3' placeholderStyle='font-weight: 500; font-size: 48rpx; color: #B8B8B8;' fontSize='48rpx' color='#000' border='none'></uv-input>
          </view>
          <view class="tab" @click="tapMoney">{{ word ? '其他金额' : '取消' }}</view>
          <view class="foo">
            <button hover-class="none" class="btn" @click='callMoney'>打赏</button>
          </view>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script setup>
import popupMoney from '../../static/popupMoney.png';
import logoImage from '@/static/logo.png';
import newDetail from '../../components/dynamic/newDetail.vue';
// import sharePage from '../../components/share/page.vue';
import comment from '../../components/send/comment.vue';
import { ref, computed } from 'vue';
import { post } from '@/api';
import { setUrl, getAddScore, checkServe, toast } from '@/common';
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app';

const onShare = ref(null);
const popup = ref(null);
let id = '';
let detail = ref({});
let peoper = ref({});
let ladder = ref(0);
let focus = ref(false);
let list = ref([]);
let total = 0;
let last_page = 0;
let page = 1;
let limit = 15;
let money = ref('')
let word = ref(true);
let showPage = ref(false);
let showLeng = ref([]);
const isBuy = computed(() => { // 收费且未购买
  return detail.value.is_charge == 2 && detail.value.is_buy == 0;
})

onLoad((option) =>{
  id = option.id;
  getData('frist');
})
onShow(() => {
  if(showPage.value){
    getData();
  }
})
// #ifdef APP-PLUS
// 上拉加载
onReachBottom(() => {
  if(last_page < page || last_page == page) return;
  page++
  loading();
  getList();
  uni.hideLoading();
})
// #endif

function getData(value){
  post('api/news/getNewsInfo', { news_id: id }).then(res => {
    if(res.code == 1){
      const data = res.data;
      detail.value = data;
      showPage.value = true;
      // #ifdef APP-PLUS
      if(value == 'frist') getList();
      const params = {
        type: 19,
        target_id: id
      }
      getAddScore(params, '每周阅读动态');
      // #endif
    }
  })
}
function setHelp(index){
  if(detail.value.helpful != 0) return toast('不能重复点击');
  const params = {
    news_id: id,
    type: index
  }
  post('api/news/newsIsHelpful', params).then(res => {
    if(res.code == 1){
      getData();
    }
  })
}
// 获取一级评论列表
function getList(){
  const params = {
    page,
    limit,
    news_id: id
  }
  post('api/news/newsCommentList', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      last_page = data.last_page;
      total = data.total;
      list.value = [...list.value, ...data.data];
    }
  })
}
// 打赏
function callMoney(){
  if(!word.value && !money.value) return toast('请输入投研币');
  if(!word.value && (Number(money.value) > 200 || Number(money.value) < 1)) return toast('请输入1~200的投研币');
  if(word.value){
    money.value = uni.$uv.random(1, 200);
  }else{
    if(!uni.$uv.test.digits(money.value)) return toast('只能输入整数');
  }
  popup.value.close();
  const params = {
    news_id: id,
    coin: Number(money.value)
  }
  uni.setStorageSync('user', detail.value.user);
  uni.navigateTo({
    url: `/pages/dynamic/cashier2?params=${JSON.stringify(params)}`
  });
}
// 提交评论内容
function submit(){
  page = 1;
  list.value = [];
  getList();
  peoper.value = {}; //初始化用户回复行动
  ladder.value = 0;
}
function reply(row){
  peoper = row.peoper;
  ladder = row.ladder;
  focus.value = true;
}
function nowShare(row){
  showLeng.value = row;
  onShare.value.open();
}
function openPopup(){
  popup.value.open();
}
function tapMoney(){
  money.value = '';
  word.value = !word.value;
}
function popupChange(e){
  if(!e.show){
    setTimeout(() => {
      word.value = true;
      money.value = '';
    }, 1000)
  }
}
// 分享
function getShare(row){
  if(row.id == 5) toast('开发中...');
  
  let title = detail.value.title;
  let summary = detail.value.content;
  let href = `${uni.$uv.http.config.webUrl}/pages/dynamic/detail?id=${id}`;
  let imageUrl = detail.value.images ? setUrl(detail.value.images.split(',')[0]) : logoImage;
  
  if(row.id == 6) {
    uni.setClipboardData({
    	data: href,
    	success: function () {
    		toast('复制成功');
    	}
    });
    onShare.value.close();
    return;
  }
  function goShare(){
    let scene = {
      1: 'WXSceneSession',
      2: 'WXSceneTimeline'
    }
    uni.share({
      provider: row.share,
      scene: scene[row.id],
      type: 0,
      href,
      title,
      summary,
      imageUrl,
      success(res) {
        console.log(JSON.stringify(res));
        console.log('分享成功');
      },
      fail(err) {
        console.log(JSON.stringify(err));
        console.log('分享失败');
      },
      complete() {
        console.log('初始化');
      }
    })
  }
  onShare.value.close();
  checkServe('share', row.share, goShare);
}
// 跳转app
function goApp(){
  // #ifdef WEB
  var userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.indexOf('micromessenger') !== -1) {
    msg = '请点击右上角，在浏览器打开';
    modal.value.open();
  } else {
    let route = `/pages/dynamic/detail?id=${id}`
    location.href = 'touyanbao://' + route
    noApp();
  }
  // #endif
}
// 无响应或者没安装跳转下载
let timer = null;
function noApp() {
	console.log("===========》noApp");
	var t = Date.now(),
		r = 'https://www.xcxwo.com/QfvDcS';
	timer = setTimeout(function() {
    console.log(document.hidden);
    console.log(document.webkitHidden);
		return Date.now() - t > 3200 ? (clearTimeout(timer), !1) : !document.webkitHidden &&!document.hidden &&void(location.href = r);
	}, 3000);
}
function goBuy(){
  uni.navigateTo({
    url: `/pages/dynamic/cashier?id=${id}`
  });
}
</script>

<style lang="scss" scoped>
  .popupBox{
    position: relative;
    padding-top: 80rpx;
    .cell{
      background-repeat: no-repeat;
      background-size: contain;
      width: 560rpx;
      height: 578rpx;
      .foo{
        padding: 0 80rpx;
        padding-top: 50rpx;
      }
      .tab{
        font-weight: 400;
        font-size: 28rpx;
        color: #465B89;
        text-align: center;
        padding-top: 24rpx;
      }
      .moneyNumber{
        width: 480rpx;
        height: 120rpx;
        margin: 0 auto;
        margin-top: 60rpx;
        background-color: #EFEFEF;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        .font{
          font-weight: 500;
          font-size: 48rpx;
          color: #2B2B2B;
          padding-right: 8rpx;
        }
      }
      .moneyBg{
        width: 480rpx;
        height: 120rpx;
        line-height: 120rpx;
        margin: 0 auto;
        margin-top: 60rpx;
        background-color: #EFEFEF;
        border-radius: 16rpx;
        font-weight: 500;
        font-size: 48rpx;
        color: #2B2B2B;
        text-align: center;
      }
      .name{
        text-align: center;
        padding-top: 90rpx;
        font-size: 36rpx;
        color: #2B2B2B;
      }
    }
    .ava{
      width: 160rpx;
      height: 160rpx;
      position: absolute;
      top: 0rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .navRight{
    width: 44rpx;
    height: 44rpx;
    font-size: 0;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .pox{
      width: 100%;
      .left{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .font{
          color: #e43222;
          font-size: 28rpx;
          font-weight: 500;
        }
        .desc{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          padding-top: 8rpx;
        }
      }
      .btn{
        font-size: 34rpx;
        width: 360rpx;
        &.w100{
          width: 100%;
        }
      }
    }
  }
  .appNav{
    padding: 0 30rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
      .logo{
        width: 60rpx;
        height: 60rpx;
        font-size: 0;
        border-radius: 10rpx;
        overflow: hidden;
      }
      .name{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-left: 20rpx;
      }
    }
    .btn{
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
  }
  .safe{
    width: 100%;
    height: 208rpx;
    background-color: #fff;
  }
  .moneyBox{
    display: flex;
    justify-content: center;
    padding: 40rpx 0;
    .money{
      width: 400rpx;
      height: 140rpx;
      background-image: linear-gradient(90deg, #FF644C 0%, #E43222 100%);
      border-radius: 140rpx;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .more{
        padding-top: 4rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
      }
      .font{
        display: flex;
        align-items: center;
        .icon{
          width: 40rpx;
          height: 40rpx;
        }
        .master{
          font-weight: 500;
          font-size: 36rpx;
          color: #FFFFFF;
          padding-left: 8rpx;
        }
      }
    }
  }
  .works{
    display: flex;
    align-items: center;
    height: 100rpx;
    width: 100%;
    position: relative;
    border-top: 1px solid #E6E6E6;
    .line{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 1px;
      height: 36rpx;
      background-color: #E6E6E6;
    }
    .item{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      &.red{
        color: #e43222;
      }
      &.grap{
        color: #737373;
      }
    }
  }
  .comment{
    padding: 30rpx;
    padding-top: 80rpx;
    .head{
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      padding-bottom: 24rpx;
      border-bottom: 1px solid #E6E6E6;
    }
  }
  .share{
    padding: 0 30rpx;
  }
  .head{
    padding: 0 30rpx;
  }
</style>